<template>
    <div class="switch" :class="[checked === false ? 'off' : 'open', disabled === true ? 'disabled' : '']"
         @click="switchStatus">
        <span class="switch-icon"></span>
        <span class="switch-text">{{checked === false ? off : on}}</span>
        <input class="hidden" type="hidden" :id="id" :value="checked" :name="name" :required="required"/>
    </div>
</template>

<script>
    export default {
        name: 'SwitchI',
        data () {
            return {
                checked: this.value
            };
        },
        props: {
            value: {type: Boolean, default: false},
            id: {type: String},
            name: {type: name},
            required: {type: Boolean},
            disabled: {type: Boolean},
            off: {type: String, default: 'OFF'},
            on: {type: String, default: 'ON'},
            change: {type: Function}
        },
        watch: {
            value: function (newVal) {
                this.checked = newVal;
            },
            checked: function (newVal) {
                this.$emit('input', newVal);
            }
        },
        methods: {
            switchStatus () {
                if (this.disabled === true) {
                    return;
                }
                this.checked = !this.checked;

                if (this.change instanceof Function) {
                    this.change(this.checked, this.$el);
                }
            }
        }
    };
</script>

<style scoped="" lang="scss">
    .open {
        background-color: #4CAF50;
        border: 1px solid #4CAF50;
        .switch-icon {
            transition: margin-left 500ms;
            margin-left: 36px;
        }
        .switch-text {
            padding-left: 7px;
            text-align: left;
            color: white;
            line-height: 23px;
        }
    }

    .off {
        background-color: #e51c23;
        border: 1px solid #e51c23;
        .switch-icon {
            transition: margin-left 500ms;
            margin-left: 0;
        }
        .switch-text {
            padding-right: 7px;
            text-align: right;
            color: white;
            line-height: 23px;
        }
    }
    .switch {
        height: 24px;
        border-radius: 15px;
        width: 60px;
        display: inline-block;
        cursor: pointer;
        &.disabled {
            cursor: no-drop;
            border-color: #bbbbbb;
        }
        .switch-icon {
            position: absolute;
            height: 22px;
            width: 22px;
            background-color: white;
            display: block;
            border-radius: 50%;
        }
        .switch-text {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 12px;
        }
    }
</style>
